<template>
  <div class="explain-wrap">
    <div v-if="showFlag == 1" class="loading-box">
      <img src="../../assets/authentication/loading.gif" alt />
      <p>正在为您检测实名认证流程，请稍后...</p>
    </div>
    <div v-else-if="showFlag == 2">
      <div class="explain-item" @click="toCertification(1)">
        <div class="explain-img">
          <img src="@/assets/authentication/icon1.png" alt />
        </div>
        <div class="text">
          <span>个人认证</span>
          <span>居民身份证信息及其他证件认证</span>
        </div>
        <van-icon class="icon" name="arrow" />
      </div>
      <div class="explain-item" @click="toCertification(0)">
        <div class="explain-img">
          <img src="@/assets/authentication/icon2.png" alt />
        </div>
        <div class="text">
          <span>企业认证</span>
          <span>填写企业信息及法人信息</span>
        </div>
        <van-icon class="icon" name="arrow" />
      </div>
    </div>

    <div v-else-if="showFlag == 3">
      <!-- 实名认证流程异常 -->
      <div class="stepNum3-content">
        <img class="success-img" src="@/assets/authentication/icon4.png" alt />
        <h2>认证异常</h2>
        <p class="stepNum5_p">您的实名认证流程异常</p>
        <p class="stepNum5_p">如有疑问请联系：400-156-8818</p>
      </div>
    </div>

    <div v-show="showFlag == 3" class="footer">
      <p @click="handleLogout">退出当前账号 ></p>
    </div>
    <van-dialog
      v-model="logoutDialog"
      class="logout-dialog"
      :showConfirmButton="false"
      :showCancelButton="false"
    >
      <div name="title" class="title">提示</div>
      <div name="default" class="content">确定退出当前账号吗？</div>
      <div class="footer">
        <div class="enter" @click="handleEnter">确认</div>
        <div class="cancel" @click="()=>{this.logoutDialog = !this.logoutDialog}">取消</div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import {
  register,
  personGetIdTpye,
  getProvinceAjax,
  checkSign,
} from "@/api/authentication";
import { removeToken } from "@/utils/auth";
export default {
  data() {
    return {
      showFlag: 1,
      yst_user_type: "",
      logoutDialog: false,
    };
  },
  created() {
    // this.$toast.loading({
    //   duration: 0,
    //   message: "正在检测实名认证流程",
    //   forbidClick: true,
    //   loadingType: "spinner",
    // });
    setTimeout(() => {
      this._register();
    }, 2000);
  },
  methods: {
    // 实名认证检测
    _register() {
      register().then((res) => {
        console.log("实名认证检测res", res);
        this.yst_user_type = localStorage.getItem("yst_user_type");
        let testCode = res.code;
        // let testCode = 10018;
        if (testCode == 10010) {
          // 实名认证选择页面
          this.showFlag = 2;
        } else if (testCode == 10025) {
          // 实名认证流程异常
          this.showFlag = 3;
        } else if (
          (testCode >= 10011 && testCode <= 10014) ||
          testCode == 10021 ||
          testCode == 10022 ||
          (testCode == 10020 && this.yst_user_type == 1)
        ) {
          // 认证未完成跳转到个人认证页面
          this.$router.push({
            name: "personal",
            params: {
              code: testCode,
            },
          });
        } else if (
          (testCode >= 10015 && testCode <= 10019) ||
          testCode == 10023 ||
          testCode == 10024 ||
          testCode == 10025 ||
          (testCode == 10020 && this.yst_user_type == 2)
        ) {
          // 认证未完成跳转到企业认证页面
          console.log("认证未完成跳转到企业认证页面", testCode);

          this.$router.push({
            name: "company",
            params: {
              code: testCode,
            },
          });
        }
      });
      // .finally(() => {
      //   this.$toast.clear();
      // });
    },
    // 去认证
    toCertification(type) {
      if (type) {
        this.$router.push({
          name: "personal",
        });
      } else {
        this.$router.push({
          name: "company",
        });
      }
    },
    // 退出登录
    handleLogout() {
      this.logoutDialog = true;
    },
    // 确认退出登录
    handleEnter() {
      this.logoutDialog = false;
      removeToken();
      this.$router.push({
        path: "/login",
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.explain-wrap {
  width: 100vw;
  height: 100vh;
  padding-top: 40px;
  position: relative;
  .loading-box {
    width: 100%;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    img {
      width: 300px;
    }
  }
  .explain-item {
    width: 90%;
    height: 190px;
    margin: 0 auto;
    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    line-height: 190px;
    padding: 0 30px;
    margin-bottom: 30px;
    position: relative;
    img {
      width: 90px;
      height: 90px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    .text {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      margin-left: 110px;
      text-align: left;
      span {
        line-height: 50px;
        font-size: 26px;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        &:nth-of-type(1) {
          font-size: 30px;
          font-weight: 600;
          color: rgba(17, 17, 17, 1);
        }
      }
    }
    .icon {
      line-height: 190px;
      font-size: 26px;
      color: #bcbcbc;
    }
  }
  .stepNum3-content {
    margin-top: 380px;
    text-align: center;
    .success-img {
      width: 515px;
      height: 225px;
      margin: 0 auto;
      margin-bottom: 40px;
    }
    h2 {
      font-size: 36px;
      font-weight: 600;
      color: #111;
    }
    p {
      padding: 30px 0 50px 0;
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      &.stepNum5_p {
        padding: 0;
        padding-bottom: 20px;
        &:first-of-type {
          padding-top: 30px;
        }
        &:last-of-type {
          padding-bottom: 50px;
        }
      }
      span {
        color: #387eff;
      }
    }
    .success-btn {
      display: inline-block;
      width: 310px;
      height: 88px;
      background: rgba(254, 96, 24, 0);
      border: 1px solid rgba(236, 236, 236, 1);
      border-radius: 4px;
      line-height: 88px;
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(254, 96, 24, 1);
    }
  }
  .footer {
    text-align: center;
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 30px;
    color: #333;
  }
  .logout-dialog {
    width: 650px;
    height: 327px;
    text-align: center;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    padding: 30px 50px;
    .title {
      font-size: 32px;
      font-weight: 500;
      color: rgba(17, 17, 17, 1);
      margin-bottom: 30px;
    }
    .content {
      font-size: 30px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 48px;
      margin-bottom: 60px;
    }
    .footer {
      display: flex;
      justify-content: center;
      > div {
        width: 210px;
        height: 70px;
        line-height: 70px;
        background: rgba(238, 238, 238, 1);
        border-radius: 4px;
        color: #666666;
        &:nth-of-type(1) {
          margin-right: 40px;
          color: #fff;
          background: linear-gradient(
            90deg,
            rgba(255, 147, 3, 1),
            rgba(254, 96, 24, 1)
          );
        }
      }
    }
  }
}
</style>